/* ######################################################################

        PD1000 'main.css' for PIUON - 2014.04.01
        HTML 5 & Newest web browser preferential support
        Specialization for webapp

        - By PD1000 (Web service creator) -

        본 스타일시트는 에디터 메인화면을 구현해주는 스타일시트이다.

###################################################################### */

/* ======================================================================
        Basic
====================================================================== */

/* Wrapper z-index */
.bg_background{z-index:1}
.bg_wrapper{z-index:10}
.items_wrapper{z-index:20}

/* Wrapper basic */
.bg_background{
    background-position:center center;overflow:hidden;
    background-image:url(../item_bg_patterns/pattern_pb1.gif);
}
.bg_guide_line{border-left:2px dashed #fff;border-right:2px dashed #fff;outline:dashed 2px #333} /* Guide line */
.snap_sp{position:fixed;top:0;left:0;width:0;height:100%} /* Snapping area */

/* Toggle switch (Top bar & Setting panel) */
.btn_gotoindex{display:block;margin:6px 0 0 6px;cursor:pointer}
.btn_iw_switch, .btn_sp_switch, .btn_sp_sh{position:absolute;width:32px;height:32px}
.btn_sp_switch img, .btn_sp_sh img{width:100%}
.btn_sp_sh{top:7px;left:10px} /* Main panel open button */
.btn_sp_switch{top:7px;right:10px} /* Main panel close button */
.btn_iw_switch{top:10px;right:50px}
.sp_close, .sp_close_h, .iw_show{display:none}
.iw_hide{display:block}
.iw_show, .iw_hide, .sp_open_h, .sp_close_h, .sp_close{position:absolute;top:0;left:0;cursor:pointer}


/* ======================================================================
        Setting Panel
====================================================================== */

/* Basic layout */
.setting_wrapper{position:fixed;top:0;left:-120%;bottom:0;min-width:280px;z-index:101;background:#f5f5f5;overflow:hidden}
.setting_wrapper_head{position:absolute;top:0;left:0;width:100%;height:44px;background:#eee;border-bottom:1px solid #ddd;cursor:move}
.sp_wrapper_index, .sp_wrapper_bg{position:absolute;top:45px;left:-200%;width:100%;height:100%;box-sizing:border-box;overflow-x:hidden;overflow-y:auto}
.sp_wrapper_index{padding:30px 40px}
.sp_wrapper_bg{padding:20px 25px}

/* Main Index */
.sp_main_box{width:100%;height:100%}
.sp_main_title{}
.sp_main_index{width:100%;overflow:hidden;zoom:1}
.sp_main_index a{width:100%;height:40px;display:block;cursor:pointer}
.spm_index_icon{float:left;margin:3px 0 0 3px}
.spm_index_title{float:left;margin:7px 0 0 14px}


/* ======================================================================
        Popup gallery
====================================================================== */

.bg_gallery_box1, .bg_gallery_box2{position:fixed;right:-120%;width:232px;height:394px;z-index:101;overflow:hidden}
.bg_gallery_box1{top:50px}
.bg_gallery_box2{top:460px}
.galbox_head{position:absolute;top:0;left:0;width:100%;height:44px;background:#eee;border-bottom:1px solid #ddd;cursor:move}
.galbox_content{position:absolute;top:44px;left:0;width:100%;height:90%;padding:7% 1% 7% 7%;box-sizing:border-box}
.galbox_title{margin:12px}
.galbox_close1, .galbox_close2{width:30px;height:30px;margin:8px;cursor:pointer}
.galbox_close1 img, .galbox_close2 img{width:100%}


/* ======================================================================
        Media Query
====================================================================== */